<template>
    <div class="svg-box">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 820 600">

      <g>
       <g>
        <a class="" x="wn">
         <path class="st0" d="M241.6,343l-5-2l-4-3h-3l-2,3l-2,4l-3,3l-4,2h-5l-1-3l-2-4l1-3l6-6l5-4l1-5l-4-4l1-2h4l2-6l-1-4h-7l-5-2v-5
			l-6-1l-9,1h-11l-1-9c0,0-3,0-4,0s-2-1-2-1l-1-3c0,0-4-2-4-3s-5-1-5-1h-4v3c0,0,0,3,0,5s-5,0-5,0s-4,0-5-1s0-4,0-4l1-3l7-3l2-1
			c0,0,0-1-1-2s-3-5-3-5l-4-3v-3l2-6c0,0-4-7-4-8s-6-3-6-3v-2l3-4l1-6l-3-5c0,0-7-3-8-3s-5,2-6,2s-6,1-6,1l-3-2l-3-5v-4l-1-6l-2-5
			c0,0-6-1-8,0s-4-1-4-1l-2-2l-4-2l-1-7l-1-4l-4-4l-8-1l-7-3l-3,3l-1,5l-4,5v10c0,0-4,1-6,1s-1,3-1,3s-1,5-3,6s-4,1-5,1s0,6,0,6
			l-6-1c0,0-5,3-5,4s-1,5-2,6s-2,3-2,3l-8,7c0,0-6,8-7,9s-4,0-5,0s-6,2-6,2s-6,4-6,5s-2,5-2,5l-3,3c0,0-2,5-3,6s4,3,4,3s1,3,1,4
			s-1,6-2,7s3,2,3,2s5-1,6-2s6-4,6-6s4-3,5-4s4,2,4,2s4,5,4,6s5,10,6,11s0,9,0,11s-2,5-2,5s-4,3-5,3s-5,4-7,5s-4,7-4,7s3,8,3,9
			s5,14,5,14s6,2,7,2s-1,3-1,3l-1,3c0,0,0,6-1,7s-2,8-2,9s1,5,1,6s5,4,6,5s3,4,4,5s1,3,2,4s3,2,4,2s3,4,3,4l5,1l3-1h2c0,0,2,1,3,1
			s6-1,6-1s4-1,5-1s6,1,6,1s6,1,7,1s4,2,7,2s6-3,7-4s0-6,0-7s0-6,0-7s6-6,6-6s1-5,1-6s3-2,3-2l5-1c0,0,3,1,4,2s6,3,7,4s4,2,5,3
			s5-2,5-2l9-1l11,3l5-10l3-9l4-3l3,2c0,0,2,5,2,6s2,5,1,6s3,14,3,14h19v8l3,3l17,6h8l1-23c0,0,5-1,5-2s3-2,3-3s5-2,5-2s1-2,1-3
			s0-5,0-5s2-3,3-5s1-4,1-4v-16l-4,1L241.6,343z"></path>
         <text transform="matrix(1.0001 0 0 1 129.5644 345.3234)" class="st1 st2 st3">威宁县</text>
         <circle class="st4" cx="147.6" cy="323" r="8"></circle>
         <circle class="st5" cx="147.6" cy="323" r="4"></circle>
        </a>
       </g>                                                                                                                    <g>
       <a class="" x="hz">
        <path class="st0" d="M300.6,280l2-1l2-2l-1-1l-3-2l-2-6l-6-1l-2-4l-10-13l-3-1l-5-1c0,0-3-1-3-4s7-7,7-7v-3c0,0-7-5-7-7s3-3,3-4
			s0-3,0-3l-2-2l-3-6l-4-4l-5-2l-4,2l-4,4l-3-3h-3l-10,1l-5,1l-2,2l-7,1l-5,1l-2-2l-4-2h-4l-4-3l-1-7v-6l-11-5l-7,1l-3-7l-5-2l-8-2
			l-6,3l1,8l-19,21l-1,7h-5l-7,6l-4,2l3,5l3,2c0,0,5-1,6-1s5-2,6-2s8,3,8,3l3,5l-1,6l-3,4v2c0,0,6,2,6,3s4,8,4,8l-2,6v3l4,3
			c0,0,2,4,3,5s1,2,1,2l-2,1l-7,3l-1,3c0,0-1,3,0,4s5,1,5,1s5,2,5,0s0-5,0-5v-3h4c0,0,5,0,5,1s4,3,4,3l1,3c0,0,1,1,2,1s4,0,4,0l1,9
			h11l9-1l6,1v5l5,2h7l1,4l-2,6h-4l-1,2l4,4l-1,5l-5,4l-6,6l-1,3l2,4l1,3h5l4-2l3-3l2-4l2-3h3l4,3l5,2l3,1l4-1l2-4c0,0,5-4,6-5
			c1-1,2-5,2-6s4-3,5-3s2,3,2,3s5,5,6,6s6,3,6,3l5-1l1-4c0,0,2-5,2-6s0-7,0-7l2-3l4-2l3,2l2-3h2c0,0,3-2,3-3s0-3,0-3l-2-3
			c0,0-2,0-3,0s-7,0-7,0h-1l-3-4l-1-2l3-2l4-2l3-3l3-2l3-1l2-1c0,0,1-2,0-3S300.6,280,300.6,280z"></path>
        <text transform="matrix(1.0001 0 0 1 221.5644 285.3234)" class="st1 st2 st3">赫章县</text>
        <circle class="st4" cx="239.6" cy="263" r="8"></circle>
        <circle class="st5" cx="239.6" cy="263" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a>
        <path class="st0" d="M425.6,344c0,0,0-6,0-7s-1-2-1-2l-2-5l-1-1h-1h-3l-3-1v-6l-3-1l-2-4l-1-3c0,0-4,0-5,1s-4,2-5,3s-5,1-5,1
			l-3-3c0,0-3-2-4-3s-1-4-1-4l-3-4h-5l-3-2c0,0-7-1-8-1s-9,0-10,0s-4-2-4-2s-3-4-4-5s0-4,0-4l1-4l-1-5h2l3-2l1-3v-2h2h2l4-1h2l1-1
			c-2,0-3-3-6-3s-4,2-6,2s-5-2-7-2s-10,6-10,6l-2,1l-2-1l-3-1h-4l-1,2l-4,1h-6l-4,1l-4-2l-3-1l1,1l-2,2l-2,1c0,0,1,3,2,4s0,3,0,3
			l-2,1l-3,1l-3,2l-3,3l-4,2l-3,2l1,2l3,4h1c0,0,6,0,7,0s3,0,3,0l2,3c0,0,0,2,0,3s-3,3-3,3h-2l-2,3v3c0,0-2,3-3,3s-1,3-2,5s0,9,0,9
			l1,4l8,1c0,0,0,6-1,7s5,4,5,4l4,5l2,8l2,6l2,10l13,16l2,1l2-1l4-4l2,4c0,0,5,9,5,10s5,2,5,2l6-1l7-1l2,1l2,6l4-3l2-4l5-3l3-6l4-7
			l7-7l2-5l3-4l3-4l4-3h11l4-1l6-3l-2-6l3-2l2-1l-2-2l1-6L425.6,344z"></path>
        <text transform="matrix(1.0001 0 0 1 354.5644 364.3234)" class="st1 st2 st3">纳雍县</text>
        <circle class="st4" cx="372.6" cy="342" r="8"></circle>
        <circle class="st5" cx="372.6" cy="342" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a>
        <path class="st0" d="M533.6,372c-1-3,6-6,6-6s0-27-1-28s-6-4-6-4s-1-1-3-4c-0.4-0.6-0.5-1.2-0.4-1.8l-2.6-0.2l-3,4l-3,1h-7v3h-4
				l-2-1l-4-2l-4,2l1,3l2,4l-3,2h-5c0,0-4,2-4,1s-3-2-3-2s-2-3-3-4s-3-3-3-3l-4-1l-2-6l-3-6l-1-9l-1-5l-6-3c0,0-0.1-0.1-0.2-0.3
				l-2.8,0.3l-1,1l-3,1l-3-2h-4l-4,1l-1-2l-3-1l-2,2h-4l-2-3h-1l-3-2h-3l-1,3h-2l-1,4l1,4l1,3l-1,3v4h-4v3v4h1l1,1l2,5c0,0,1,1,1,2
				s0,7,0,7l-3,3l-1,6l2,2l-2,1l-3,2l2,6l-6,3l-4,1h-11l-4,3l-3,4l-3,4l-2,5l-7,7l-4,7l-3,6l-5,3l-2,4l-4,3l3,3c0,0,12,1,15,3
				s3,8,3,8l3,3l5-1l4,1l4,3l3,4l2,4h5l4-1l5-3c0,0,2-4,2-5s2-3,2-3l3-4l4-2l8,2c0,0,3-1,4-2s2-2,2-2l3-3h5l3,1h3v-3l3-3h13l3-1
				c0,0,2-2,3-4s5-4,6-4s8,1,10,3s1,8,0,9s7,7,9,7s11-6,11-6s6-2,8-4s7-2,8-5s3-13,2-15s4-8,4-10S534.6,375,533.6,372z"></path>
        <text transform="matrix(1.0001 0 0 1 435.5644 386.3234)" class="st1 st2 st3">织金县</text>
        <circle class="st4" cx="453.6" cy="364" r="8"></circle>
        <circle class="st5" cx="453.6" cy="364" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a>
        <path class="st0" d="M579.6,267c-0.3-1.2-0.3-2.4-0.1-3.4l-1.9-0.6l-4-3c0,0-3-3-3-4s-1-5-1-5l1-3l-1-5l1-3l3-2l3-4l-1-3h-5l-1-2
				v-4l-1-4c0,0-2-1-2-2s-4-1-4-1l-5-1l-2,1l-3,1l-3-2l-4-3l-2-3h-4v1l-2,3l-3,3l-3,3l-2,3l-4,6l-1,4h-2l-4,1h-7l-5-1l-2,2l-1,3
				l-3,6l-6,2l-5,2l-4,2l-2-2l-4-3l-3-1l-2,3l-4,4l-4,2l-3,3v5l-3,2v6c0,0,2,6,2,7s-2,3-2,3l-3,6c0,0-2,6-1,6s1,5,1,5s3,3,4,4
				s3,5,3,5l6,3l1,5l1,9l3,6l2,6l4,1c0,0,2,2,3,3s3,4,3,4s3,1,3,2s4-1,4-1h5l3-2l-2-4l-1-3l4-2l4,2l2,1h4v-3h7l3-1l3-4l2.6,0.2
				c0.3-2.3,3.4-4.2,3.4-4.2s6,0,8,0s3-6,5-6s3,5,8,6s5-1,5-1l2-4c0,0,8,0,11-2s3-8,3-12s8-10,8-10l8-6v-5
				C590.6,284,581.6,275,579.6,267z"></path>
        <text transform="matrix(1.0001 0 0 1 488.5644 304.3234)" class="st1 st2 st3">黔西县</text>
        <circle class="st4" cx="506.6" cy="282" r="8"></circle>
        <circle class="st5" cx="506.6" cy="282" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a class="map-a-hover" x="df" @mouseover="changeData('df')" @click="linkPage('df')" :class="[(active === 'df') ? activeClass:normalClass]">
        <path class="st6 mapclas" d="M362.6,274l-4,1h-2h-2v2l-1,3l-3,2h-2l1,5l-1,4c0,0-1,3,0,4s4,5,4,5s3,2,4,2s9,0,10,0s8,1,8,1l3,2h5l3,4
				c0,0,0,3,1,4s4,3,4,3l3,3c0,0,4,0,5-1s4-2,5-3s5-1,5-1l1,3l2,4l3,1v6l3,1h3v-4v-3h4v-4l1-3l-1-3l-1-4l1-4h2l1-3h3l3,2h1l2,3h4
				l2-2l3,1l1,2l4-1h4l3,2l3-1l1-1l2.8-0.3c-0.5-1-2-3.9-2.8-4.7c-1-1-4-4-4-4s0-5-1-5s1-6,1-6l3-6c0,0,2-2,2-3s-2-7-2-7v-6l3-2v-5
				l3-3l4-2l4-4l2-3l3,1l4,3l2,2l4-2l5-2l6-2l3-6l1-3l2-2l5,1h7l4-1l-2-5c0,0-3-5-4-6s-3-4-3-4l-4-4l-2-3c0,0-3-2-3-3s-1-3-1-3l-2-4
				l-1-3l-3-1l-3-1l-1-1l1-2h2v-2l-1-2l-2-2l-4-3l-4-2l-3-1l-3,1l-2,2h-3v-1l-1-1l-2-1h-1v-3h2l2-1v-1v-3h-1h-3l-1-3l1-2h1l1-1l2-5
				v-2v-2l-3-3l-2-1h-4l-4,1l-2,1l-2,1l-2-1l-2,1l-2-1c0,0-2,2-5,2s-3-4-3-4h-3l-1,2l-3,1l-4-1l-3,2l-1,3l-1,10l-2,2h-5l-8,3
				c0,0-6,2-7,3s-10,10-10,10l-1,4c0,0,0,2,2,3s2,5,2,5l-1,2c0,0,1,2,2,3s2,3,2,5s-18,18-18,18s-3,3-2,7s1,6,1,8s-6,7-6,9s3,4,3,6
				s-5,8-6,9s-6,4-8,4l-1,1H362.6z"></path>
        <text transform="matrix(1.0001 0 0 1 399.5644 281.3234)" class="st7 st2 st3">大方县</text>
        <circle class="st4 outcirc" cx="417.6" cy="259" r="8"></circle>
        <circle class="st8 incirc" cx="417.6" cy="259" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a class="map-a-hover" x="js" @mouseover="changeData('js')" @click="linkPage('js')" :class="[(active === 'js') ? activeClass:normalClass]">
        <path class="st6 mapclas" d="M640.6,214c0,0-2-5-2-6s3-3,3-3s1-6,0-7s-7-14-8-15s-4-1-4-1l-5-1c0,0-3-10-10-12s-17,4-17,4v8h-8
				c0,0-5-8-11-7s-10,7-10,7l-11,1l1-12l2-1c0,0,1-6,0-8s-10-7-11-7s-11,9-11,9s-13,0-18,0c0-8-5-14-9-19s-7-3-13-4c0-14-8-14-10-15
				s-8,1-10,1c-0.8,0-2.1-0.2-3.6-0.3c-2.9,2-5.9,4.3-6.4,5.3c-1,2-5,5-5,5l-2,3c0,0-4,0-4,1s-1,5-1,5v4l-1,1l-3,1l-1,6l2,1l2-1l2,1
				l2-1l2-1l4-1h4l2,1l3,3v2v2l-2,5l-1,1h-1l-1,2l1,3h3h1v3v1l-2,1h-2v3h1l2,1l1,1v1h3l2-2l3-1l3,1l4,2l4,3l2,2l1,2v2h-2l-1,2l1,1
				l3,1l3,1l1,3l2,4c0,0,1,2,1,3s3,3,3,3l2,3l4,4c0,0,2,3,3,4s4,6,4,6l2,5h2l1-4l4-6l2-3l3-3l3-3l2-3v-1h4l2,3l4,3l3,2l3-1l2-1l5,1
				c0,0,4,0,4,1s2,2,2,2l1,4v4l1,2h5l1,3l-3,4l-3,2l-1,3l1,5l-1,3c0,0,1,4,1,5s3,4,3,4l4,3l1.9,0.6c1.2-5.5,9.1-7.6,9.1-7.6v-6l2-2
				h4l4-2l1-3h4v-2l4-1l1-3h6l2-2l3-2h3v-4l1-5h4l4-2h7v-2h3l1-2L640.6,214z"></path>
        <text transform="matrix(1.0001 0 0 1 520.5644 206.3234)" class="st7 st2 st3">金沙县</text>
        <circle class="st4 outcirc" cx="538.6" cy="184" r="8"></circle>
        <circle class="st8 incirc" cx="538.6" cy="184" r="4"></circle>
       </a>
      </g>                                                                                                                    <g>
       <a>
        <path class="st0" d="M269.6,227c0,2,7,7,7,7v3c0,0-7,4-7,7s3,4,3,4l5,1l3,1l10,13l2,4l6,1l2,6l3,2l3,1l4,2l4-1h6l4-1l1-2h4l3,1
				l2,1l2-1c0,0,8-6,10-6s5,2,7,2s3-2,6-2s4,3,6,3s7-3,8-4s6-7,6-9s-3-4-3-6s6-7,6-9s0-4-1-8s2-7,2-7s18-16,18-18s-1-4-2-5s-2-3-2-3
				l1-2c0,0,0-4-2-5s-2-3-2-3l1-4c0,0,9-9,10-10s7-3,7-3l8-3h5l2-2l1-10l1-3l3-2l4,1l3-1l1-2h3c0,0,0,4,3,4s5-2,5-2l1-6l3-1l1-1v-4
				c0,0,1-4,1-5s4-1,4-1l2-3c0,0,4-3,5-5c0.5-1,3.5-3.3,6.4-5.3c-2-0.2-4.3-0.3-5.4,0.3c-2,1-6,6-6,6h-9l1-2h-11v3h-5v4l-2,3h-3
				c0,0-3-1-3-2s-4-1-4-1s-1,3-2,3s-3,2-4,2s-2-1-3-2s-2-3-2-3l-1-4h-2l-1-3c0,0-4,0-8,0c-5-9-9-10-9-10s-9,0-14,0
				c-11,0-26,17-26,17s0,19-1,19s-2,3-2,3s-5,4-6,4s-3,3-3,3l3,4c0,0,3,7,2,7s-3,4-3,4s-2,4-2,5s-1,8-1,8s-4,6-4,7s-3,1-3,1h-3
				c0,0-3-2-4-2s-5-1-5-1l-5-3h-8l-6,1l-9,6l-8,5l-9,6l-4,2l-2,4c0,0,0,2,0,3S269.6,225,269.6,227z"></path>
        <text transform="matrix(1.0001 0 0 1 309.5639 241.3234)" class="st1 st2 st3">七星关区</text>
        <circle class="st4" cx="333.6" cy="219" r="8"></circle>
        <circle class="st5" cx="333.6" cy="219" r="4"></circle>
       </a>
      </g>                                                                    </g>
     </svg>
	</div>
</template>
<script>
    import mapbg from '@/assets/images/map-bg.png'  //农业数据统计
    export default {
        name:'mapbjsvg',
        components: {
        },
        props: {
        },
        data () {
            return {
                mapbg,
				params:0,
                active:'js',
                activeClass:'map-a-hover active',
                normalClass:'map-a-hover'
            }
        },
        computed: {
        },
        methods: {
            changeData(e){
                if(this.active===e) return false;
                this.active=e;
                this.$store.state.currentCounty=e;
                this.$emit('changeData',e)
            },
            linkPage(e){
                let _this=this;
                switch (e){
                    case 'js':
                        _this.params='js';
                        break;
                    case 'df':
                        _this.params='df';
                        break;
                }
                this.$router.push({  //核心语句
                    path:'/countyView',   //跳转的路径
                    query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                        id:_this.params ,
                    }
                })
            },
            init(){
                if(!this.$store.state.currentCounty){
                    this.$store.state.currentCounty=this.active;
                }else {
                    this.active=this.$store.state.currentCounty;
                }
                this.$store.state.bottomTitle=this.$store.state.currentCounty;
            }
        },
        mounted () {
            this.init()
        },
        created(){
        }
    }

</script>
<style type="text/css">
 .st0{fill:#05328A;stroke:#337FD6;stroke-miterlimit:22.9256;}
 .st1{fill:#6698FF;}
 .st2{font-family:'MicrosoftYaHei';}
 .st3{font-size:12px;}
 .st4{fill:#56688B;}
 .st5{fill:#2E3370;}
 .st6{fill:#262C8B;stroke:#337FD6;stroke-miterlimit:22.9256;}
 .st7{fill:#00FFFF;}
 .st8{fill:#262C8B;}
 .mapclas {
  fill: #1A1AD4;
  stroke: aqua;
  stroke-miterlimit: 10;
 }
 .active .mapclas{
  transition:fill 0.5s;
  fill:#0040FF;
 }

 .active .incirc{
  transition:fill 0.5s;
  fill:aqua;
  opacity:1;
 }
 .active .outcirc{
  transition:fill 0.5s;
  fill:#00CCFF;
  opacity:0.5;
  animation-name: zoom;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
 }

 a:hover .mapclas{
  fill:#0040FF;
  transition:fill 0.5s;
 }
 a:hover .incirc{
  fill:aqua;
  transition:fill 0.5s;
 }
 a:hover .outcirc{
  fill:#00CCFF;
  transition:fill 0.5s;
  opacity:0.5;
  /*鼠标移入时，外圆放大动画*/
  animation: zoom ease infinite 2s;
  /*!*animation-name: zoom;*!*/
  /*!*animation-duration: 2s;*!*/
  /*!*animation-timing-function: ease;*!*/
  /*!*animation-iteration-count: infinite;*!*/
  /*transform: ;*/
  -webkit-transform-origin: 50% 50% 0;
  /*-moz-transform-origin: 0 0;*/
  /*-o-transform-origin: 0 0;*/
  /*-ms-transform-origin: 0 0;*/
  /*opacity:0.6;*/
  /*fill:#fff200;*/
 }
 @keyframes zoom {
  0% {
   transform:scale(1,1);
   opacity:0.6;
  }
  50% {
   transform:scale(1,1);
   opacity:0.2;
  }
  100% {
   transform:scale(1,1);
   opacity:0.6;
  }
 }
</style>